<script setup lang="ts">
import { useUserStore } from '@/store/usersStore.js';
import { onMounted, watch } from "vue";
import {ChatDotRound, ChatDotSquare} from "@element-plus/icons-vue";

// 获取store实例
const userStore = useUserStore();

// 当登录状态变化时重新获取对话
watch(
    () => userStore.islogin,
    (newVal) => {
      if (newVal) {
        userStore.getHistoryConversation();
      }
    },
    { immediate: true } // 立即执行一次
);

// 组件挂载时确保获取数据
onMounted(() => {
  if (userStore.islogin) {
    userStore.getHistoryConversation();
  }
});
const handleConversationClick = (conversation:any) => {
  // 设置当前对话并加载历史消息
  userStore.canCreateConversation=false;
  userStore.setCurrentConversation(conversation);
  userStore.getHistoryMessage();
};
</script>

<template>
  <span>历史对话</span>
  <el-divider/>

  <div v-if="!userStore.islogin">
    请登录查看历史对话
  </div>

  <div v-else-if="userStore.historyConversations.length === 0">
    暂无历史对话记录
  </div>

  <div class="conversation-list">
    <el-link
        v-for="conversation in userStore.historyConversations"
        :key="conversation.id"
        class="conversation-card"
        @click="handleConversationClick(conversation)"
    >

    <el-space  spacer=" ">
      <el-icon :size="25"><ChatDotRound /></el-icon>
      <div style="font-size: 15px">{{ conversation.title }}</div>
    </el-space>
    </el-link>
  </div>
</template>

<style scoped>
.conversation-card {
  margin-bottom: 16px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.conversation-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.conversation-list {
  display: flex;
  flex-direction: column; /* 垂直排列 */
  align-items: flex-start; /* 靠左对齐 */
}

.conversation-card {
  margin-bottom: 16px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.conversation-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
</style>